Vue Js checkbox set default checked: In Vue.js, you can set the default value for a checkbox to be checked by binding the “checked” attribute to an array in your component’s data and using the “v-model” directive to bind the value of each checkbox to an element in the array.In this tutorial, we will learn how to check the checkbox by default.
How to set checkbox default checked in Vue Js?
In this example, the “selectedOptions” data property is set to ["vue"], so the vue checkboxes will be checked by default. The “v-model” directive binds the value of each checkbox to an element in the “selectedOptions” array, so when the user checks or unchecks a checkbox, the “selectedOptions” array will be updated accordingly.
Vue Js checkbox default checked
<div id="app">
<div v-for="(item,index) in items">
<input :value="item" type="checkbox" v-model="selectedOptions"/>
{{item}}
</div>
<pre>Selected item: {{selectedOptions}} </pre>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
selectedOptions: ["Vue"],
items: ["Vue","React","Angular","Node","Express","Php","Bootstrap",],
};
},
methods: {},
}).mount("#app");
</script>
Output of above example
